<template>
  <div>
    <div class="card">
      <el-card class="card-box" shadow="hover"
        >总人数：{{ this.nums }}
      </el-card>
      <el-card class="card-box" shadow="hover"
        >今日填报人数：{{ this.today_nums }}</el-card
      >
      <el-card class="card-box" shadow="hover"
        >今日未填报人数：{{ this.today_no_nums }}</el-card
      >
      <el-card class="card-box" shadow="hover"
        >今日健康人数：{{ this.today_health }}</el-card
      >
      <el-card class="card-box" shadow="hover"
        >今日疑似感染人数：{{ this.today_illness }}</el-card
      >
    </div>
    <div class="title">24小时疫情防控填报数据</div>
    <ve-line :data="chartData"></ve-line>
    <div class="title">24小时疫情防控健康数据</div>
    <ve-line :data="chartData1"></ve-line>
  </div>
</template>

<script>
export default {
  created: function () {
    this.getIndex();
  },
  methods: {
    getIndex() {
      this.$api({
        url: "/index/users_num",
        method: "get",
        success: (data) => {
          console.log(data.length);
          this.nums = data.length;
        },
      });
      this.$api({
        url: "/index/today_num",
        method: "get",
        success: (data) => {
          console.log(data.length);
          this.today_nums = data.length;
          this.today_no_nums = this.nums - data.length;
        },
      });
      this.$api({
        url: "/index/today_health_num",
        method: "get",
        success: (data) => {
          console.log(data.length);
          this.today_health = data.length;
          this.today_illness = this.today_nums - this.today_health;
        },
      });
      this.$api({
        url: "/index/tianbaobiao",
        method: "get",
        success: (data) => {
          console.log(data);
          for (let i = 0, l = data.length; i < l; i++) {
            let json = {
              时间: i,
              填报人数: data[i],
            };
            this.chartData.rows.push(json);
          }
          console.log(this.chartData.rows);
        },
      });
      this.$api({
        url: "/index/healthbiao",
        method: "get",
        success: (data) => {
          console.log(data);
          for (let i = 0, l = data.length; i < l; i++) {
            let json = {
              时间: i,
              健康人数: data[i],
            };
            this.chartData1.rows.push(json);
          }
          console.log(this.chartData1.rows);
        },
      });
    },
  },
  data: function () {
    return {
      nums: "",
      today_nums: "",
      today_no_nums: "",
      today_health: "",
      today_illness: "",
      chartData: {
        columns: ["时间", "填报人数"],
        rows: [
          { 时间: "07-09", 填报人数: 20, 未填报人数: 13 },
          { 时间: "07-10", 填报人数: 21, 未填报人数: 20 },
          { 时间: "07-11", 填报人数: 23, 未填报人数: 17 },
          { 时间: "07-12", 填报人数: 28, 未填报人数: 15 },
          { 时间: "07-13", 填报人数: 24, 未填报人数: 16 },
          { 时间: "07-14", 填报人数: 26, 未填报人数: 16 },
          { 时间: "07-15", 填报人数: 25, 未填报人数: 13 },
          { 时间: "07-16", 填报人数: 25, 未填报人数: 13 },
          { 时间: "07-17", 填报人数: 25, 未填报人数: 13 },
          { 时间: "07-18", 填报人数: 25, 未填报人数: 13 },
          { 时间: "07-19", 填报人数: 25, 未填报人数: 13 },
          { 时间: "07-20", 填报人数: 25, 未填报人数: 13 },
          { 时间: "07-21", 填报人数: 25, 未填报人数: 13 },
          { 时间: "07-22", 填报人数: 25, 未填报人数: 13 },
          { 时间: "07-23", 填报人数: 25, 未填报人数: 13 },
          { 时间: "07-24", 填报人数: 25, 未填报人数: 13 },
        ],
      },
      chartData1: {
        columns: ["时间", "健康人数"],
        rows: [
          { 时间: "07-09", 健康人数: 20, 疑似感染人数: 13 },
          { 时间: "07-10", 健康人数: 21, 疑似感染人数: 20 },
          { 时间: "07-11", 健康人数: 23, 疑似感染人数: 17 },
          { 时间: "07-12", 健康人数: 28, 疑似感染人数: 15 },
          { 时间: "07-13", 健康人数: 24, 疑似感染人数: 16 },
          { 时间: "07-14", 健康人数: 26, 疑似感染人数: 16 },
          { 时间: "07-15", 健康人数: 25, 疑似感染人数: 13 },
          { 时间: "07-16", 健康人数: 25, 疑似感染人数: 13 },
          { 时间: "07-17", 健康人数: 25, 疑似感染人数: 13 },
          { 时间: "07-18", 健康人数: 25, 疑似感染人数: 13 },
          { 时间: "07-19", 健康人数: 25, 疑似感染人数: 13 },
          { 时间: "07-20", 健康人数: 25, 疑似感染人数: 13 },
          { 时间: "07-21", 健康人数: 25, 疑似感染人数: 13 },
          { 时间: "07-22", 健康人数: 25, 疑似感染人数: 13 },
          { 时间: "07-23", 健康人数: 25, 疑似感染人数: 13 },
          { 时间: "07-24", 健康人数: 25, 疑似感染人数: 13 },
        ],
      },
    };
  },
};
</script>

<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.card {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}
.card-box {
  width: 250px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: rgb(128, 128, 128);
  cursor: pointer;
  background-color: rgb(255, 255, 255);
}

.title {
  width: 100%;
  text-align: left;
  height: 50px;
  line-height: 50px;
  font-weight: 700;
  padding-left: 20px;
}
</style>
